<template>
  <div class="company">
    <section class="banner">
      <img src="@/assets/banner/home_pic_yj.png">
    </section>
    <section class="company-title">
      <div class="title">
        <div class="title-cn">我们的资质</div>
        <div class="title-en">IOS9001、高新、软著 带你一起实力见“证”</div>
        <div class="title-line"></div>
      </div>
    </section>
    
    <div class="company-container cooperative">
      <div class="company-banner">
        <Carousel height="600px" arrow="always" trigger="click" :dots="'none'">
          <CarouselItem class="cooperative-banner-item">
            <Row class="aptitude-item">
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO270001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO9001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">质量管理体系证书</span>
              </Col>
            </Row>
          </CarouselItem>
          <CarouselItem class="cooperative-banner-item">
            <Row class="aptitude-item">
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO270001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">ISO9001证书</span>
              </Col>
              <Col span="8" class="aptitude-item-page">
                <img src="" class="aptitude-item-page-img">
                <span class="aptitude-item-page-desc">质量管理体系证书</span>
              </Col>
            </Row>
          </CarouselItem>
        </Carousel>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  mounted() {

  },
  methods: {
  }
}
</script>

<style scoped>
.company {
  background-color: #fff;
  padding: 0 0 240px 0;
}
.banner {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.title {
  width: 100%;
  margin: 100px 0 0 0;
  text-align: center;
}
.title .title-cn {
  font-size: 30px;
  color: rgba(51,51,51,1);
  line-height: 42px;
}
.title .title-en {
  font-size: 14px;
  color: rgba(103,103,103,1);
  line-height: 20px;
  margin-top: 12px;
}
.title .title-line {
  margin: 24px auto;
  width: 1px;
  height: 32px;
  background: rgba(230,230,230,1);
}
.company-container {
  width: 100%;
  background-color: #F5F5F5;
  padding: 120px 0 0 0;
}
.company-banner {
  width: 1300px;
  margin: 0 auto;
}
.company-banner-item {
  width: 1220px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
}
.company-banner-item > img {
  width: 170px;
  margin: 0 40px 0 0;
}
.company-banner-item > img:last-of-type {
  margin-right: 0;
}
.aptitude-item {
  width: 100%;
}
.aptitude-item-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.aptitude-item-page-img {
  width: 330px;
  height: 480px;
  background-color: #fff;
  box-shadow: 0px 12px 24px 0px rgba(0,0,0,0.08);
}
.aptitude-item-page-desc {
  font-size: 16px;
  color: rgba(51,51,51,1);
  line-height: 22px;
  margin-top: 60px;
}
</style>
